<template>
  <div>
    <div class="top" style="padding: 20px 0 0 20px;">
      <div class="title">{{project.proName}}</div><span @click="$router.push('/Cooperativemanagement/info')" class="gobackTxt">返回列表</span>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flexDiv">
        <div class="flex-left">
          <el-button type="primary" size="small" class="add buildButtonStyle" v-permission="permission.add" round @click="showDialog('build', '标段信息新增')">
            <i class="iconfont icon-icon_add"></i>&nbsp;新增标段
          </el-button>
        </div>
        <div class="flex-right" style="padding-right: 40px;">
          <el-input class="input" size="small" v-model="search.code" placeholder="标段号" clearable @change="getList(true)"></el-input>

          <el-button class="search" size="small" @click="getList(true)">
            <i class="iconfont icon-sousuo"></i> 搜索
          </el-button>
        </div>
      </div>
      <div class="list_wrap">
        <el-table class="project-management-info" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;">
          <el-table-column label="序号" type="index" align="center" width="60">
            <template slot-scope="scope">
              <!-- {{scope.$index}} -->
              {{scope.$index + (search.pageNo) * search.pageSize + 1}}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="code" label="标段号" min-width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="标段名称" min-width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="sectionLength" label="长度（千米）" min-width="120"></el-table-column>
          <el-table-column show-overflow-tooltip prop="structureType" label="结构类型" width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="startTime" label="开工日期" min-width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="endTime" label="竣工日期" min-width="150"></el-table-column>
          <el-table-column show-overflow-tooltip prop="buildUnit" label="施工单位" min-width="180"></el-table-column>
          <el-table-column show-overflow-tooltip prop="supervisorUnit" label="监理单位" min-width="180"></el-table-column>

          <el-table-column show-overflow-tooltip label="操作" fixed="right" min-width="350">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-gengduo action_color1" v-permission="permission.contract" @click="showDialog('contract','合同信息维护',scope.row.id)">&nbsp;合同信息维护</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" @click="showDialog('check','项目信息查看',scope.row.id)">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','项目信息编辑',scope.row.id)">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.total" :current-page="search.pageNo + 1" prev-text="上一页" next-text="下一页" @current-change="paginationChange"></el-pagination>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
    <ContractDetail :postDetail="ContractpostDetailData" @reloadList="getList(true)"></ContractDetail>

  </div>
</template>

<script>
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
} from '@/utils/publicFun'

import crudDict from '@/api/system/dict'
import crudProject from '@/api/buss/project'
import msgUtil from '@/utils/msgUtil'
import crudSection from '@/api/buss/sectionInfo'

export default {
  name: 'info',
  components: {
    Detail: require('./section-manage-detail').default,
    ContractDetail: require('./contract-registration-detail').default,
  },
  data() {
    return {

      permission: {
        add: ['100', 'section:add'],
        show: ['100', 'section:show'],
        edit: ['100', 'section:edit'],
        del: ['100', 'section:del'],
        contract: ['100', 'section:contract'],
      },

      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,

      addCan: false,//是否有新增权限
      project: {
        id: '',
        proName: '',
        code: '',
        unitCode: '',
        shortName: '',
        projectType: '',
        phase: '',
        constructionUnit: '',
        ownerRepresentative: '',
        startTime: '',
        endTime: '',
        amount: '',
        region: '',
        projectLocation: '',
        projectSurvey: '',
      },

      contractsAmount: 0,
      search: {
        total: 0,
        pageNo: 0,
        //pageIndex: 0,
        pageSize: 10,
        //pageSum: 0,
        code: '', // 合同名称
        sortField: 'createTime'
      }, // 搜索参数
      typeOptions: [],
      projectOptions: [
        {
          label: '所有项目',
          value: ''
        }
      ],
      list: [],
      postDetailData: {
        show: false,
        type: 'build'
      },
      navigationIndex: 0,
      ContractpostDetailData: {
        show: false,
        type: 'contract'
      },
      contractDetail_postDetailData: {
        show: false,
        type: 'check'
      },
    }
  },
  created() {
    let id = this.$route.query.id;
    this.getProjectById(id);
  },
  activated() {
  },
  methods: {

    getProjectById(id) {
      crudProject.getOne(id).then(res => {
        if (res.status == 1) {
          let data = res.data
          this.project.id = data.id
          this.project.proName = data.proName
          this.project.code = data.code
          this.project.unitCode = data.unitCode
          this.project.shortName = data.shortName
          this.project.ownerRepresentative = data.ownerRepresentative
          this.project.startTime = data.startTime
          this.project.endTime = data.endTime
          this.project.amount = data.amount
          this.project.projectLocation = data.projectLocation
          this.project.projectSurvey = data.projectSurvey

          this.getList();

        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取详情信息失败")
      })

    },

    getSubcontractRegistration(param) {
      return crudSection.getSubcontractRegistration(param).then(res => {
        if (res.status == 1) {

          return new Promise(reslove => {
            reslove(res)
          })
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取详情信息失败")
      })
    },


    //切换分页器
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },

    // 获取列表 api
    getList(reload) {
      if (reload) {
        this.search.pageNo = 0
      }
      this.list = []
      let postData = {
        project: this.project.id,
        code: this.search.code,
        pageNo: this.search.pageNo,
        pageSize: this.search.pageSize,
      }
      crudSection.getTablePage(postData).then(res => {
        if (res.status == 1) {
          if (res.list.length > 0) {
            this.list = res.list
            //this.$set(this.list, this.list.length, res.list)
          }
          this.search.total = res.total
        } else {
          msgUtil.error2(res.data.message)
        }
      })



    },


    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(this.$store.state.httpHost.buss + url + query, param)
        .then(res => {
          if (res.data.status === 1) {
            if (callback) callback(res.data)
            // 重新获取数据
            setTimeout(() => {
              this.getList(true)
            }, 1000)
          } else {
            this.$messageError(res.data.message)
          }
        })
        .catch(res => {
          console.log('请求出现错误', res);
          console.log(res)
        })
    },



    /*  操作 */
    showDialog(type, typeName, detailId) {
      let params = {}
      switch (type) {

        case 'contract':
          params.id = detailId
          this.getSubcontractRegistration(params).then(res => {

            let type = 'build'
            if (res.data == 'error') {
              type = 'error'
            } else {
              type = 'edit'
              params.subContractId = res.data
            }
            params.setionId = detailId
            params.projectId = this.project.id
            this.ContractpostDetailData = {
              show: true,
              type: type,
              params: params
            }
          })
          break

        case 'build':
          params.projectId = this.project.id
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
            params: params
          }
          break
        case 'edit':
          params.projectId = this.project.id
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
            params: params
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据及关联合同?').then(res => {
            let idlist = []
            idlist.push(detailId)
            let param = {
              ids: idlist
            }
            crudSection.del(param).then(res => {
              if (res.status === 1) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break
      }
    },


    // 点击单元格
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      console.log(column)
      if (column.property === 'code') {
        this.showDialog('check', '标段信息查看', row.id)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  .title {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    font-weight: 600;
  }
}
.operate_wrap {
  width: 100%;
  .select {
    width: 200px;
  }
  .input {
    width: 200px;
    margin: 0 15px;
  }
  .search {
    width: 88px;
    color: #fff;
  }
}
.list_wrap {
  margin-top: 20px;
}
.navigation {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #313e50;
  margin-top: 5px;
  .el-button {
    height: 40px;
    background: #374256;
    border: 1px solid #374256;
    font-family: PingFangSC-Regular;
    border-radius: 5px 5px 0 0;
    min-width: 95px;
    font-size: 14px;
    color: #8190a7;
    &:hover {
      background-color: #f2f2f2;
    }
    &[selected] {
    }
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
.gobackTxt {
  font-size: 12px;
  margin-left: 10px;
  // color: #11A6F5;
  color: #005fff;
  cursor: pointer;
  user-select: none;
}
</style>
